.top_panel_Root {
    width: 100%;
    height: 100%;
}

.Hidden #EndPhaseButton{
    opacity: 0.0;
}

#EndPhaseButton {
    width: 100px;
    height: 38px;
    horizontal-align: center;
    horizontal-align: center;
    background-color: gradient( linear, 0% 0%, 0% 100%, from( #722217), to( #DD4A29));
    background-image: url("s2r://panorama/images/backgrounds/background_play_button_2x_png.vtex");
    background-size: 328px 50px;
    border-top: 1px solid #ffffff05;
    border-right: 1px solid #00000088;
    border-left: 1px solid #ffffff05;
    border-bottom: 1px solid #00000088;
    padding: 5px;
    margin-top: 100px;
}

#EndPhaseButton Label {
    text-transform: uppercase;
    color: white;
    font-size: 13px;
    vertical-align: center;
    horizontal-align: center;
}

.TopPanelRoot {
    flow-children: right;
    /*width: 100%;*/
    vertical-align: top;
    horizontal-align: center;
}

.CenterMessage {
    horizontal-align: center;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-image: url("file://{images}/custom_game/top_panel/flag.psd");
    width: 100px;
    height: 100px;
    margin-top: -2px;
    flow-children: down;
}

.CenterMessage Label {
    horizontal-align: center;
    font-size: 17px;
    font-weight: bold;
    font-family: Goudy Trajan Medium, FZKai-Z03, TH Sarabun New, YDYGO 540;
    color: #000;
    text-shadow: #000 1px 1px 2px;
}

#RoundIndicator {
    font-size: 20px;
    margin-top: 5px;
}

#PhaseIndicator {
    margin-top: 3px;
}

#PhaseTimer {
    font-family: monospace;
    /*vertical-align: center;*/
    horizontal-align: center;
    font-size: 30px;
    font-weight: bold;
    color: white;
}

#PhaseTimer .Near {
    color: darkred;
}


/*--------------------------------------------------*/

.HeroStatePanel {
    width: 610px;
}

.PlayerAvatar {
    width: 110px;
    height: 110px;
}

.PlayerPortrait {
    flow-children: down;
    background-color: #14005d;
}

.Enemy .PlayerPortrait {
    horizontal-align: right;
}

.PlayerName {
    text-align: center;
    text-width: 100%;
    horizontal-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    color: white;
    font-family: monospaceFont;
}

.PlayerStatus {
    width: 500px;
    horizontal-align: right;
    flow-children: down;
}

.Enemy .PlayerStatus {
    horizontal-align: left;
}

.HeroHealthPanel {
    width: 100%;
}

.HealthBar {
    background-color: limegreen;
    width: 70%;
    height: 42px;
    opacity: 0.2;
}

.Enemy .HealthBar {
    background-color: darkred;
    horizontal-align: right;
}

.HealthValue {
    font-size: 25px;
    font-weight: bold;
    vertical-align: center;
    horizontal-align: center;
    color: white;
}


/*=================================================
*/

.AttributesPanel {
    /*border: 2px solid red;*/
    flow-children: right;
    tooltip-position: bottom;
    padding: 2px;
}

.Enemy .AttributesPanel {
    horizontal-align: right;
}

.AttributeBackground {
    width: 40px;
    height: 40px;
}

.AttributeLabel {
    vertical-align: center;
    horizontal-align: center;
    font-size: 25px;
    font-weight: bold;
    color: white;
}

.RemoveAttributeHover {
    vertical-align: center;
    horizontal-align: center;
    font-size: 38px;
    font-weight: bold;
    color: darkred;
}

#ManaPanel {
    height: 44px;
    padding: 2px;
    flow-children: right;
}

#Enemy_ManaPanel {
    horizontal-align: right;
    flow-children: left;
}

.ManaBall {
    width: 40px;
    height: 40px;
    margin-top: 2px;
    border-radius: 50% 50%;
    /*border: 1px #3f18d2;*/
    vertical-align: center;
}

.TooMuchLALALALALAA {
    width: fill-parent-flow(1.0);
}


/*======================================================*/

.Hidden {
    visibility: collapse;
}